<template>
    <div id="column-box">
        <div class="home-inner">
            <!-- 搜索框 -->
            <div class="search-form">
                <div class="search-form-con">
                    <!-- 选择城市 -->
                    <div class="city-sel" @click.stop="show">
                        <span class="label-text">
                            <b>{{ name }}</b>
                            <i class="icon-arrow-down"></i>
                        </span>
                        <i class="fs-line"></i>
                    </div>
                    <!-- 搜索框 -->
                    <div class="ipt-wrap">
                        <input type="text" placeholder="搜索职位、公司" class="input-search" />
                    </div>
                    <!-- 搜索按钮 -->
                    <button class="btn-search">搜索</button>
                </div>
            </div>
            <!-- 热门职位 -->
            <div class="search-hot">
                <b>热门职位:</b>
                <router-link to="/">Java</router-link>
                <router-link to="/">教室</router-link>
                <router-link to="/">管理培训生</router-link>
                <router-link to="/">产品经理</router-link>
                <router-link to="/">数据分析师</router-link>
                <router-link to="/">电商运营</router-link>
                <router-link to="/">web前端</router-link>
                <router-link to="/">新媒体运营</router-link>
                <router-link to="/">UI设计师</router-link>
                <router-link to="/">实习生</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
name: "ZColumn",
props: ["show", "name"]
};
</script>

<style lang="less" scoped>
#column-box {
    width: 100%;

    .home-inner {
        width: 1184px;
        margin: 0 auto;
        margin-bottom: 5px;
        overflow: hidden;

        // 搜索框
        .search-form {
            width: 934px;
            height: 50px;
            margin: 35px auto;
            margin-bottom: 0;
            display: flex;
            flex-wrap: nowrap;
            border: 0;

            .search-form-con {
                height: 50px;
                display: flex;
                flex-wrap: nowrap;
                box-sizing: border-box;
                padding: 1px;
                box-shadow: 0 0 10px #d1d4db;

                &:hover {
                    padding: 0;
                    border-right: 0;
                    border: 1px solid #53cac3;
                }

                // 选择城市
                .city-sel {
                    width: 78px;
                    height: 34px;
                    padding: 6px 15px 8px 15px;
                    position: relative;
                    cursor: pointer;

                    // 竖线
                    .fs-line {
                        width: 1px;
                        height: 26px;
                        background-color: #f2f2f5;
                        position: absolute;
                        top: 10px;
                        right: 0;
                    }

                    .label-text {
                        position: relative;
                        width: 68px;
                        height: 34px;
                        display: block;
                        line-height: 34px;

                        b {
                            font-size: 13px;
                            color: #414a60;
                            font-weight: 400;
                        }

                        .icon-arrow-down {
                            width: 0px;
                            height: 0px;
                            position: absolute;
                            right: 0;
                            top: 17px;
                            border: 3px solid transparent;
                            border-top-color: #8d92a1;
                        }
                    }
                }

                // 搜索框
                .ipt-wrap {
                    width: 626px;
                    height: 48px;

                    .input-search {
                        width: 100%;
                        height: 23px;
                        padding: 10px 19px;
                        border: 0;
                        outline: none;
                        font-size: 16px;
                        color: #9fa3b0;
                        font-weight: normal;
                    }
                }
            }

            // 搜索按钮
            .btn-search {
                width: 140px;
                height: 50px;
                background-color: #5dd5c8;
                border: 0;
                color: #fff;
                font-size: 16px;
            }
        }

        // 热门职位
        .search-hot {
            width: 830px;
            height: 20px;
            margin: 15px auto;
            line-height: 20px;

            b {
                font-size: 13px;
                color: #9fa3b0;
                vertical-align: middle;
                margin-right: 18px;
                font-weight: 400;
            }

            a {
                font-size: 13px;
                color: #00c2b3;
                display: inline-block;
                margin-bottom: 10px;
                margin-right: 22px;
                text-decoration: none;
            }
        }
    }
}
</style>